<!DOCTYPE html>
<html>
<script src="wfs/wfs.js"></script>

<body>
    <div>
        <p>ip:<input id="host" value="192.168.0.133" /></p>
        <p>端口：<input id="port" value="9999" />
            <button id="btn" onclick="play()">连接</button>
            <button id="btn" onclick="reload1()">刷新</button>
        </p>
        <div>
            <video id="video" style="height: 200px; width: 400px"></video>
        </div>
        <!-- <div>
            <video id="video2" style="height: 200px; width: 400px"></video>
        </div>
        <div>
            <video id="video3" style="height: 200px; width: 400px"></video>
        </div>
        <div>
            <video id="video4" style="height: 200px; width: 400px"></video>
        </div> -->
    </div>
    <script>
        function play() {
            // console.log(1)

            // 创建WebSoket对象
            // let ws = new WebSocket('ws://192.168.0.133:9999')

            // // 除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型

            // // 收到的是 ArrayBuffer 数据 ArrayBuffer 对象代表储存二进制数据的一段内存
            // // ArrayBuffer是js操作二进制数据的一个接口,ArrayBuffer 对象是以数组的语法处理二进制数据，也称二进制数组
            // // ws.binaryType = 'arraybuffer'

            // // 收到的是 blob 数据 binary Large Object （二进制大型对象）
            // // Blob 对象表示一个二进制文件的数据内容，通常用来读写文件，比如一个图片文件的内容就可以通过 Blob 对象读写
            // ws.binaryType = "blob";

            // // 二者的区别
            // // Blob 用于操作二进制文件
            // // ArrayBuffer 用于操作内存

            // 连接建立时触发
            // ws.onopen = function () {
            //     ws.send('start') // 使用连接发送数据
            // }

            // 客户端接收服务端数据时触发
            // ws.onmessage = function (msg) {
            //     console.log(typeof msg) // object
            //     console.log(msg.data) // ArrayBuffer(80) {}
            //     console.log(msg.data.toString()) // [object ArrayBuffer]
            // }

            // 关闭连接
            // ws.onclose = function (msg) {
            //     console.log(msg + "Connection closed.");
            // }
            if (Wfs.isSupported()) {
                const ip = document.getElementById('host').value
                const port = document.getElementById('port').value
                const video1 = document.getElementById('video')
                // const video2 = document.getElementById('video2')
                // const video3 = document.getElementById('video3')
                // const video4 = document.getElementById('video4')

                const wfs = new Wfs()
                // const wfs1 = new Wfs()
                // const wfs2 = new Wfs()
                // const wfs3 = new Wfs()

                wfs.attachMedia(video1, ip, port)
                // wfs1.attachMedia(video2, ip, port)
                // wfs2.attachMedia(video3, ip, port)
                // wfs3.attachMedia(video4, ip, port)
            }
        }
        function reload1() {
            window.location.reload()
        }
    </script>
</body>

</html>